<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/display/goods" is-telescreen />
    <!-- <p style="font-size: larger;">GMV</p>
    <p style="font-size: smaller;">2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46</p><br/>
    <p>2-20 (日)</p>
    <p style="font-size: xx-large; font-weight:bolder;">102.03<a style="font-size: small; font-weight: 400;">万</a></p>
    <div style="font-size: smaller;display: flex;">
      <div class="flex justify-center items-center" style="margin-right: 15px;">环比</div>
      <div class="flex justify-center items-center">
        <n-icon color="red" :size="30" :component="ArrowDropDownRound" /> 2.78%
      </div>
    </div>
  </n-card> -->
    <main-content>

      <div class="card" style="display: flex;">
        <n-card v-for="item in data1" :key="item.title">
          <p style="font-size: larger;">{{ item.title }}</p>
          <p style="font-size: smaller;">{{ item.time }}</p><br>
          <p>{{ item.date }}</p>
          <p style="font-size: xx-large; font-weight:bolder;">{{ item.count }}<a style="font-size: small; font-weight: 400;">{{ item.unit }}</a></p>
          <div style="font-size: smaller;display: flex;">
            <div class="flex justify-center items-center" style="margin-right: 2px;">环比</div>
            <div class="flex justify-center items-center">
              <n-icon color="red" :size="30" :component="ArrowDropDownRound" /> {{item.huanbi}}%
            </div>
            <div class="flex justify-center items-center" style="margin-right: 2px; margin-left: 38px;">同比</div>
            <div class="flex justify-center items-center">
              <n-icon color="green" :size="30" :component="ArrowDropUpRound" /> {{item.tongbi}}%
            </div>
          </div>
        </n-card>
      </div>
      <div class="card" style="display: flex;">
        <n-card v-for="item in data2" :key="item.title">
          <p style="font-size: larger;">{{ item.title }}</p>
          <p style="font-size: smaller;">{{ item.time }}</p><br>
          <p>{{ item.date }}</p>
          <p style="font-size: xx-large; font-weight:bolder;">{{ item.count }}<a style="font-size: small; font-weight: 400;">{{ item.unit }}</a></p>
          <div style="font-size: smaller;display: flex;">
            <div class="flex justify-center items-center" style="margin-right: 2px;">环比</div>
            <div class="flex justify-center items-center">
              <n-icon color="red" :size="30" :component="ArrowDropDownRound" /> {{item.huanbi}}%
            </div>
            <div class="flex justify-center items-center" style="margin-right: 2px; margin-left: 38px;">同比</div>
            <div class="flex justify-center items-center">
              <n-icon color="green" :size="30" :component="ArrowDropUpRound" /> {{item.tongbi}}%
            </div>
          </div>
        </n-card>
      </div>
      <div class="flex justify-center">
        <div style="background-color: #f7f7f7;height: 300px; width: 98%;">
          <p style="font-size: larger; font-weight: 400; margin-left: 20px;">GMV近30天变化趋势</p>
          <p style="font-size: smaller; margin-left: 20px;">2023-02-01~2023-2-30 | 过去30天-昨日 更新于 2023-2-30 03:04:46</p>
          <div id="main" style="height: 280px;width: 100%; display: flex;" />
        </div>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ArrowDropDownRound ,ArrowDropUpRound} from '@vicons/material'
import { ref, reactive, onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NCard,NIcon} from 'naive-ui'

import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import * as echarts from 'echarts'

type EChartsOption = echarts.EChartsOption;

var myChart
var option: EChartsOption


const data1 = reactive([
  {
    title: 'GMV',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 102.03,
    unit:'万',
    huanbi: 2.78,
    tongbi: 2.78

  },
  {
    title: '订单量',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 1365,
    unit:'人',
    huanbi: 2.78,
    tongbi: 2.78
  },
  {
    title: '客单价',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 688.21,
    unit:'',
    huanbi: 2.78,
    tongbi: 2.78

  },
  {
    title: '下单人数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 876,
    unit:'人',
    huanbi: 2.78,
    tongbi: 2.78

  }

])
const data2 = reactive([
  {
    title: '取消订单数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 1231,
    unit:'次',
    huanbi: 2.78,
    tongbi: 2.78

  },
  {
    title: '取消订单用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 1521,
    unit:'人',
    huanbi: 2.78,
    tongbi: 2.78

  },
  {
    title: '退货次数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 321,
    unit:'次',
    huanbi: 2.78,
    tongbi: 2.78

  },
  {
    title: '退货用户数',
    time: '2023-02-16~2023-02-16 今日 更新于 2023-02-16 03:04:46',
    date:'2-20 (日)',
    count: 321,
    unit:'人',
    huanbi: 2.78,
    tongbi: 2.78

  }
])

onMounted(() => {
  if(!import.meta.env.SSR) {
    myChart = echarts.init(document.getElementById('main')!)
    option = {
      xAxis: {
        type: 'category',
        data: ['2-01', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12','2-13','2-14','2-15','2-16','2-17','2-18','2-19','2-20','2-21','2-22','2-23','2-24','2-25','2-26','2-27','2-28','2-29','2-30']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 135,521,426,326,254,234,156,143,150, 230, 224, 218, 135,365,456,546],
          type: 'line'
        }
      ]
    }

    option && myChart.setOption(option)
  }
})

</script>
<style scoped>
.n-card {
  max-width: 400px;
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
